<template>
	<view class="photo">
		<view class="item" v-for="(item,index) in list">
			<image class="img" @click="clickImg(index)" :src="item.url">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {},
			// 任务ID
			taskId: 0,
			// 模版ID
			movId: 0,
			// 创作者ID
			creatorId: 0,
			// 账号ID
			accountId: 0,
			// 图集ID
			atlasId: 0,
			collectionId: 0,
			urlId: 0,
			callbackId: 0,
			// 图集名称
			atlasName: '',
			suffix: '',
		},
		data() {
			return {

			}
		},
		methods: {
			clickImg(index) {
				// 获取图片数组
				const imgList = encodeURIComponent(JSON.stringify(this.list))

				this.taskId = this.taskId ?? 0;
				this.movId = this.movId ?? 0;
				this.creatorId = this.creatorId ?? 0;
				this.accountId = this.accountId ?? 0;
				this.atlasId = this.atlasId ?? 0;
				this.collectionId = this.collectionId ?? 0;
				this.urlId = this.urlId ?? 0;
				this.callbackId = this.callbackId ?? 0;

				uni.navigateTo({
					url: "/pages/sys/home_bags/photodetail?imgList=" + imgList +
						"&selectIndex=" + index +
						"&atlasName=" + this.atlasName +
						"&atlasId=" + this.atlasId +
						"&taskId=" + this.taskId +
						"&movId=" + this.movId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&callbackId=" + this.callbackId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.photo {
		margin-top: 24rpx;
		display: flex;
		flex-wrap: wrap;

		.img {
			width: 145rpx;
			height: 145rpx;
			border-radius: 20rpx;
		}

		.item {
			margin-right: 37rpx;
			margin-bottom: 31rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}

	// @/static/icon/8.png
</style>